<template>
  <div :style="{'max-height': this.timeLineHeight + 'px' }" style="overflow-y:scroll;">
    <el-container>
      <el-header style="text-align: right; font-size: 20px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px; color: black"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native.prevent="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span style="font-family: 微软雅黑">{{username}}</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu @select="menuClick">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message-solid"></i>个人</template>
              <el-menu-item index="/userInfo">个人信息</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-camera-solid"></i>查看监控</template>
              <el-menu-item index="/monitor">实时监控</el-menu-item>
            </el-submenu>
            <el-submenu index="6" >
              <template slot="title"><i class="el-icon-user-solid"></i>信息管理</template>
              <el-menu-item index="/addOld">老人信息</el-menu-item>
              <el-menu-item index="/addWorker">工作人员信息</el-menu-item>
            </el-submenu>
            <el-submenu index="7" >
              <template slot="title"><i class="el-icon-user-solid"></i>记录日志</template>
              <el-menu-item index="/log">记录</el-menu-item>
              <el-menu-item index="/trace">轨迹日志</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {Logout} from "../../api/loginApi";
import store from "@/store";
import {mapMutations} from "vuex";

export default {
  name: "HomeView",
  mounted() {
    this.timeLineHeight = document.documentElement.clientHeight;
    window.onresize = () => {
      this.timeLineHeight = document.documentElement.clientHeight;
    };
  },
  data() {
    return {
      manager:(window.sessionStorage.getItem('role') === 'manager'),
      username:window.sessionStorage.getItem('username'),
      timeLineHeight: " ",
    }

  },
  methods: {
    menuClick(index) {
      this.$router.push(`/home${index}`);
    },
    logout() {
      Logout();
      mapMutations(['logout']),
          store.state.userInfo = {}
      this.$router.replace("/");
    }
  }
}

</script>

<style>
.el-header {
  background-color: #E4F2F5;
  color: #000000;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

</style>
